<template>
  <div style="height: 100%; background-color: rgba(255, 165, 0, 0.3)" ref="mockWrapperRef">
    <div>测试 mock.js, height: {{ wrapperHeight }}</div>
    <n-button @click="requestAwait('displayList')">await正确请求</n-button>
    <n-button @click="requestThen('displayList')">then正确请求</n-button>
    <n-button @click="requestAwait('test')">await出错请求</n-button>
    <n-button @click="requestThen('test')">then出错请求</n-button>
    <base-a />
  </div>
</template>

<script setup lang="ts">
import { MacKeyboard, HotkeyHelper, WinKeyboard } from '@/hooks'
import { PageTabHelper } from '@/hooks'
import { createRequest, ResponseFail } from '@/service'
import { registerWindowResize } from '@/utils'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { BaseA } from './components'
import mitt from 'mitt'
import { countEmitter } from './eventBus'

let hotkeyHelper: HotkeyHelper | null = null
const request = createRequest({ baseURL: 'http://localhost:5181/supervise/' })
const mockWrapperRef = ref<HTMLDivElement | null>(null)

async function requestAwait(param: string) {
  const r = await request.get(param)
  console.log('业务成功1 :', r)
}
function requestThen(param: string) {
  request.get(param).then((r) => {
    console.log('业务成功2 :', r)
  })
}
const wrapperHeight = ref(0)
registerWindowResize(() => {
  wrapperHeight.value = mockWrapperRef.value?.offsetHeight || 0
})

function bindHotkey() {
  hotkeyHelper = new HotkeyHelper(
    [
      [MacKeyboard.COMMAND, 'x'],
      [WinKeyboard.CTRL, 'x'],
    ],
    () => {
      console.log('exec "ctrl + x" operation')
    }
  )
}
function unbindHotkey() {
  if (hotkeyHelper) {
    hotkeyHelper.unbind()
  }
}
const route = useRoute()

const pageTabHelper = new PageTabHelper({
  activeHandler: bindHotkey,
  inactiveHandler: unbindHotkey,
  immediate: true,
})

// 演示 mitt 使用
countEmitter.on('childACountChange', (e) => {
  console.log('### childACountChange', e)
})
</script>

<style scoped></style>
